<template>
  <div style="height:100%;" ref="dingding">
    <transition style="height:100%;" name="el-zoom-in-center">
      <div style="height:100%;" v-show="!showMessage">
        <!-- wx联系人 -->
        <div v-show="show" class="contentBoxWx" @scroll="throttleFn" ref="lianxiren">
          <div class="headerWX">
            <div style="text-align: center;font-weight: bold;font-size: 18px;">{{ titleName }}</div>
            <div v-if="titleName == '钉钉'" style="padding:0 10px;margin-top:5px;"><el-input v-model="searchWord"
                @keyup.enter.native="onSearchStart1" placeholder="请输入关键词按回车搜索钉钉"></el-input></div>
          </div>
          <!-- 聊天对象列表 -->
          <div class="wxUserItem" v-for="(item, index) in friendListData" :key="index"
            @click="opemMessageDetials(item, 0)">
            <img style="border-radius: 10px;margin-left:10px;" :src="item.avatar ? item.avatar : srcLogo" width="55"
              height="55" alt="头像">
            <div style="margin-left: 10px;width: 251px;">
              <div class="textwx" style="font-weight: bold;"><span>{{ item.friend_nickname == '' ? item.group_name : item.friend_nickname}}</span><span
                  v-if="item.company">({{ item.company }})</span></div>
              <div class="textwx" v-if='item.create_username' style="color: #bdbdbd;margin-top: 5px;">
                创建人：{{ item.create_username }}
              </div>
            </div>
            <div class="dateTime">{{$t('wechat.number')}}:{{ item.cnt }} </div>
          </div>
          <div class="loadingBox" v-if="showLoading"
            style="color:#2196f3;text-align: center;margin-top:20px;margin-bottom:20px;"><i :class="loadClass"
              style="color:#2196f3;margin-top: 30px;margin-bottom:30px;"></i> {{ loadingText }}</div>
        </div>
        <!-- wx我的 -->
        <div v-show="!show" class="contentBoxWx">
          <div class="selfInfo">
            <img :src="srcLogo" style="border-radius: 5px;" width="70" height="70" alt="">
            <div class="" style="margin-left:15px;">
              <div style="font-size:20px;margin-bottom:5px;font-weight: bold;">{{ accountData.nickname }}</div>
              <div> {{$t('wechat.phone')}}：{{ accountData.phone}}</div>
              <div>{{$t('wechat.zuzhi')}}:{{ accountData.company }}</div>
              <div>{{$t('wechat.email')}}:{{ accountData.email }}</div>
            </div>
          </div>
          <div class="list" style="margin-top:20px;">
            <div style="height:50px;border-bottom: 1px solid #ededed;line-height: 50px;"><i
                class="el-icon-user-solid"></i> {{$t('wechat.friend')}}({{ accountData.cnt }})</div>
          </div>
        </div>

        <div class="flooterBox">
          <div class="btn2" @click="openContent('钉钉')">
            <img :src="src" width="45" height="45" alt="">
          </div>
          <div class="btn2" @click="openContent('群')">
            <img :src="srcQun" width="45" height="45" alt="">
          </div>
          <div class="btn2" @click="openContent('我的')">
            <img :src="srcSelf" width="45" height="45" alt="">
          </div>
        </div>
      </div>
    </transition>
    <transition name="el-zoom-in-center">
      <!-- 聊天内容 -->
      <div v-show="showMessage">
        <div class="headerMessage" v-show="!showSearchList">
          <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="black()"><i
              class="el-icon-arrow-left"></i></div>
          <div style="width: 70%;text-align: center;font-weight: bold;">
            {{ chatWithObj.friend_nickname ? chatWithObj.friend_nickname : chatWithObj.group_name }}</div>
          <el-button class="dayin" style="float:right;" type="text" @click="openPrint" :title="$t('wechat.openPrint')" ><i
              class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
          <el-button class="dayin" v-if="titleName == '群'" style="float:right;" type="text" @click="qunContent" :title="$t('wechat.openPrint')" ><i
              class="el-icon-printer"></i> 群成员</el-button>
          <!-- <div class="searchWX" :title="$t('wechat.searchKey')" ref="showSearchIcon" @click="openSearch"><i class="el-icon-search"></i></div>
          <transition name="el-zoom-in-top">
            <div v-show="showSearchBox" ref="myDiv" class="searchWXContent">
              <el-input class="searchInputWX" v-model="messageSearchWord" @keyup.enter.native="searchWeChatMessage()"
                placeholder="输入关键词按回车键搜索聊天内容"></el-input>
            </div>
          </transition> -->
        </div>
        <!-- 内容区 -->
        <div style="height:100%;" v-show="!showSearchList">
          <otherMessage ref="wechatBox" :chatWithObj="chatWithObj" :recovery="recovery"
            :accountData="accountData" :offsetLimit='offsetLimit' />
        </div>
        <div v-if="showSearchList" style="padding:0 10px;">
          <div class="headerMessage">
            <div style="font-weight: bold;margin-left: 10px;cursor: pointer;" @click="blackMessageList()"><i
                class="el-icon-arrow-left"></i></div>
            <div v-if="titleName == '钉钉'" style="width: 86%;text-align: center;font-weight: bold;">{{$t('wechat.chatcontent')}}</div>
          </div>
          <!-- 搜索内容区 -->
          <div class="searchContentBox">
            <div class="remarkListItem" @click="flyRemarkMessageItem(item)" v-for="(item, index) in searchMessageListData"
              :key="index">
              <div v-if="titleName == '钉钉'">
                <img v-if="item.issend == 0" :src="item.contactavatar" alt="" width="50" height="50">
                <img v-else-if="accountData.avatar" :src="accountData.avatar" alt="" width="50" height="50">
              </div>
              <div style="width:300px;padding-left:10px;">
                <div style="color:#bdbdbd;position: relative;">
                  <span
                    style="width:210px;display: inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; ">{{
                      item.sendernick ? item.sendernick : item.sendername }}</span>

                  <span style="position: absolute;right:0px;">
                    {{ formateDate(item.msgtime) }}
                  </span>
                </div>
                <div style="height:30px;line-height: 40px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                  :title="item.content" v-html="highlight(item.content, messageSearchWord)"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <a-modal width="430px" height="600" v-model="showQunContent" :getContainer="getRefsAff" :maskClosable="false" title="群成员">
      <el-table
        :data="qunList"
        border
        height="90vh"
        style="width: 100%">
        <el-table-column
          prop="mem_nickname"
          label="昵称"
          >
        </el-table-column>
        <el-table-column
          prop="mem_remarkname"
          label="备注"
          >
        </el-table-column>
        <el-table-column
          prop="mem_id"
          label="账号"
          >
        </el-table-column>
      </el-table>
    </a-modal>
  </div>
</template>

<script>
import loadingTem from '../loading/index.vue'
import otherMessage from './otherMessage.vue'
import { throttle } from 'lodash';
import { parseTime } from '@/utils/index'
import { getOtherAppAccountInfo, getOtherAppFriendList, getDingDingQunCYApi } from "@/api/otherApi/otherApp_api"
import { getWeChatAccountInfo, getWeChatFriendList, getWeChatGroupList, getWeChatPublicList, getWeChatFriendMessageList, searchFunction, getWeChatGroup_number } from '@/api/weChat/weChat_api'
export default {
  props: ['sendData'],
  name: "dingding",
  components: {
    otherMessage
  },
  data() {
    return {
      showQunContent: false,
      qunList:[],
      selectld: -1,
      selectType: 0, //0下1上
      selectTime: -1,
      isExistsSelectID: 1,

      searchMessageListData: [],
      showSearchList: false,
      messageSearchWord: '',
      showSearchBox: false,
      loadClass: 'el-icon-loading',
      loadingText: '正在加载. . .',
      showLoading: false,
      srcLogo: require('../../../assets/images/otherApp/ding.png'),
      searchWord2: '',
      searchWord1: '',
      active: '钉钉',
      recovery: 0,
      chatWithObj: '',
      accountData: '',
      friendListData: [],
      titleName: '钉钉',
      showMessage: false,
      show: true,
      searchWord: '',
      src: require('../../../assets/图标/QQ/qq消息蓝色.png'),
      srcSelf: require('../../../assets/图标/QQ/qq我.png'),
      srcQun: require('../../../assets/图标/QQ/qq群.png'),
      // 好友
      offset: 1,
      limit: 20,
      total: 0,
      // 群组
      groupOffset: 1,
      groupLimit: 10,
      totalGroup: 0,
      // 公众号
      publicOffset: 1,
      publicLimit: 10,
      publicTotal: 0,

      // 群成员
      groupModalOffset: 1,
      groupModalLimit: 20,
      groupModalTotal: 0,

      // --------------------
      offsetLimit: ''
    }
  },
  watch: {
    '$store.state.account.tikTok': function () {
      this.friendListData = []

      if (this.sendData.list_offset) {
        if (this.sendData.app_name == '钉钉') {
          //   this.tab='1'
          // this.flyRemarkMessageItem('钉钉')
          this.offset = this.sendData.list_offset;
          this.limit = this.sendData.list_limit;
        } else if (this.sendData.app_name == '群组') {
          //   this.tab='2'
          this.groupOffset = this.sendData.list_offset;
          this.groupLimit = this.sendData.list_limit;
          // this.onSearch2()
        } else {
          //   this.tab='3'
        }
      } else {
        // this.offset=1
        this.offset = 1
        this.offset = 1
        this.total = 0

        this.groupOffset = 1
        this.totalGroup = 0

        this.groupModalOffset = 1
        this.groupModalTotal = 0
      }
      // this.friendListData = []
      this.openContent('钉钉')
      this.showMessage = false;
      // this.init()

    }
  },
  created() {
    this.friendListData = []
    this.init()

  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.handleClickOutside);
  },
  methods: {
    // 群成员
    qunContent(){
      let data = {
        proof_num:this.sendData.proof_num,
        account:this.accountData.account_id,
        group_id: this.chatWithObj.group_id,
        limit: 10000,
        offset:1
      }
      getDingDingQunCYApi(data,'/chat/dingdingGroupFriends').then(res=>{
      this.showQunContent = true
      this.qunList = res.data

      })
    },
    getRefsAff() {
      return this.$refs.dingding
    },
    openPrint() {
      this.$refs.wechatBox.openPrintHtml();
    },
    flyRemarkMessageItem(item) {
      switch (this.titleName) {
        case '钉钉':
          this.$refs.wechatBox.flayRemark(item);
          this.showSearchList = false;
          break;
        case '群组':
          this.$refs.wechatGroupBox.flayRemarkGrop(item)
          this.showSearchList = false;
          break;
        default:
          break;
      }

    },
    formateDate(date) {
      return parseTime(date);
    },
    highlight(text, keyword) {
      let str = text;
      let newStr = str.replace(keyword, `<span class='highlight' style="color:red;">${keyword}</span>`);

      //使用正则表达式全局匹配关键字，将其用 <span> 标签包裹起来，并添加样式
      return newStr;

    },
    blackMessageList() {
      this.showSearchList = false;
    },
    searchWeChatMessage() {
      switch (this.titleName) {
        case '钉钉':
          let data = '';

          data = {
            recovery: this.recover,
            proof_num: this.chatWithObj.proof_num,
            account_id: Number(this.chatWithObj.account_id),
            model: 'other_app',
            username: this.chatWithObj.username,
            searchkey: this.messageSearchWord,
            offset: this.offset,
            limit: this.limit,
            selectType: this.selectType, //0下1上
            selectTime: this.selectTime,
            isExistsSelectID: this.isExistsSelectID,
            chatContentID: Number(this.selectld)
          }

          searchFunction(data, '/search/chat/content_new').then(res => {
            this.searchMessageListData = res.data;
            this.showSearchList = true;
            // // this.$refs.wechatBox.onSearch(this.messageSearchWord);
            // // this.messageSearchWord = '';
            this.showSearchBox = false;
          })
          break;
        case '群组':
          let data1 = '';

          data1 = {
            proof_num: this.chatWithObj.proof_num,
            account_id: this.chatWithObj.account_id,
            contactid: this.chatWithObj.groupname,
            model: 'wechat',
            recovery: this.recovery,
            searchkey: this.messageSearchWord,
            limit: this.limit,
            selectId: this.selectld,
            selectType: this.selectType, //0下1上
            selectTime: this.selectTime,
            isExistsSelectID: this.isExistsSelectID
          }

          searchFunction(data1, '/search/tencent/content_new').then(res => {
            this.searchMessageListData = res.data;
            this.showSearchList = true;
            this.showSearchBox = false;
          })
          break;

        default:
          break;
      }



    },
    handleClickOutside(event) {
      // if (!this.$refs.myDiv.contains(event.target)) {
      //   // 在这里处理点击除元素外的其他地方触发事件的逻辑
      //   if (event.target._prevClass !== 'el-icon-search' && event.target._prevClass !== 'searchWX') {
      //     this.showSearchBox = false;
      //   } else {
      //     this.showSearchBox = !this.showSearchBox;
      //   }
      // }
    },
    openSearch() {
      this.showSearchBox = this.showSearchBox;
    },
    throttleFn: throttle(function () {
      // 获取列表元素
      const list = this.$refs.lianxiren;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 >= list.scrollHeight) {
        this.showLoading = true;

        if (this.friendListData.length < this.total) {
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          // 加载更多数据
          let that = this;
          setTimeout(() => {
            switch (that.titleName) {
              case '钉钉':
                that.offset++;
                that.onSearch1();
                break;
              default:
                break;
            }
          }, 1000)
        } else {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    }, 1000),
    handleScroll() {
      // 获取列表元素
      const list = this.$refs.lianxiren;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight + 10 >= list.scrollHeight) {
        this.showLoading = true;

        if (this.friendListData.length < this.total) {
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          // 加载更多数据
          let that = this;
          setTimeout(() => {
            switch (that.titleName) {
              case '钉钉':
                that.offset++;
                that.onSearch1();
                break;
              default:
                break;
            }
          }, 1000)
        } else {
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },

    // 钉钉搜索
    onSearchStart1() {
      this.friendListData = []
      this.offset = 1
      this.onSearch1()
    },


    // 查看钉钉好友聊天
    checkWeChatMessage(item, number, offset, time, id) {
      this.offsetLimit = {
        offset: this.offset,
        limit: this.limit,
        label: this.sendData.label,
        msg_offset: offset,
        msgtime: time,
        id: id
        // recovery:this.sendData.recovery
      }
      // this.recovery=number
      // this.total=res.data[0].cntlog(item)
      this.$store.commit('SET_OTHERDATA', Date.parse(new Date()));
      this.chatWithObj = item
      sessionStorage.setItem('flag', 'friend')
      //   this.showMessageList=true
      //   this.showGroup=false
      //   this.showPublic=false
    },

    // 初始化请求     账号信息
    init() {
        this.accountData = this.sendData

      // let nodeData = JSON.parse(sessionStorage.getItem('sumData'))
      // let data = {
      //   proof_num: this.sendData.proof_num,
      //   account_id: Number(this.sendData.account_id),
      //   username: this.sendData.label,
      // }
      // getOtherAppAccountInfo(data).then(res => {
      //   this.accountData = res.data[0]
        this.onSearch1()

      // })
    },
    onSearch1(b) {

      this.showSearchBox = false;
      let data = {
        proof_num: this.sendData.proof_num,
        account_id: this.sendData.account_id,
        // searchkey: this.searchWord,
        category: this.titleName == '群'?1:0
        // offset: this.offset,
        // limit: this.limit
      }

      searchFunction(data, '/chat/dingding').then(res => {
        this.showLoading = false;

        //   this.$refs.friendList.scrollTop=0
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.friendListData.push(element)
        }

        this.total = res.data[0].cnt
        if (this.sendData.list_offset) {
          let d = JSON.parse(sessionStorage.getItem('only'))
          if (this.sendData.app_name == '钉钉' && d == true) {
            this.friendListData.forEach(element => {
              if (element.username == this.sendData.contact_username) {
                this.opemMessageDetials(element, 0, this.sendData.msg_offset, this.sendData.msgtime, this.sendData.id)
                this.showMessage = true;
                sessionStorage.setItem('only', false)
              }
            })


          } else {

          }
        }
      }).catch(err => {
      })
    },

    openContent(number) {
      this.friendListData = [];
      this.offset = 1;
      this.groupOffset = 1;
      this.publicOffset = 1;
      switch (number) {
        case '钉钉':
          this.show = true;
          this.titleName = '钉钉'

          this.src = require('../../../assets/图标/QQ/qq消息蓝色.png')

          this.srcSelf = require('../../../assets/图标/QQ/qq我.png')
          this.srcQun = require('../../../assets/图标/QQ/qq群.png')
          this.init()
          break;
          case '群':
          this.show = true;
          this.titleName = '群'

          this.srcQun = require('../../../assets/图标/QQ/qq群蓝色.png')

          this.src = require('../../../assets/图标/QQ/qq消息.png')
          this.srcSelf = require('../../../assets/图标/QQ/qq我.png')
          this.init()
          break;
        case '我的':
          this.show = false;
          this.srcSelf = require('../../../assets/图标/QQ/qq蓝色我.png')

          this.srcQun = require('../../../assets/图标/QQ/qq群.png')
          this.src = require('../../../assets/图标/QQ/qq消息.png')
          break;
        default:
          break;
      }
    },
    opemMessageDetials(item, number, offset, time, id) {
      console.log(item)
      this.showMessage = true;
      this.offsetLimit = {
        offset: this.offset,
        limit: this.limit,
        label: this.sendData.label,
        msg_offset: offset,
        recovery: this.sendData.recovery,
        msgtime: time,
        id: id
      }
      this.recovery = number
      // this.total=res.data[0].cntlog(item)
      this.$store.commit('SET_OTHERDATA', Date.parse(new Date()));
      this.chatWithObj = item
      sessionStorage.setItem('flag', 'friend')
    },
    black() {
      this.showMessage = false;
      this.messageSearchWord = ''
      // this.$refs.wechatBox.clearMessage();
    }
  }
}
</script>

<style scoped>
.searchContentBox {
  height: 740px;
  overflow-y: auto;
  padding-bottom: 100px;
}

.searchContentBox::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.searchContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.searchContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.highlight {
  color: red;
}

.remarkListItem {
  cursor: pointer;
  display: flex;
  height: 70px;
  border-bottom: 1px solid #e9e9e9;
  padding: 0 10px;
  /* justify-content: space-between; */
  align-items: center;
}

.searchInputWX {
  margin-top: 20px;

}

.headerMessage {
  height: 50px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  font-size: 20px;
  position: relative;
}

.searchWX {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.searchWX:hover {
  color: #38c5f9;
  font-weight: bold;
}

.searchWXContent {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  /* border: 1px solid red; */
  position: absolute;
  top: 50px;
  padding: 5px 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.list>div {
  padding-left: 20px;
}

.selfInfo {
  height: 170px;

  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.headerWX {
  height: 80px;
  border-bottom: 1px solid rgb(224, 224, 224);
  z-index: 1000;
  width:100%;
  background: #fff;
}


.dateTime {
  position: absolute;
  top: 14px;
  right: 10px;
  color: #bdbdbd;
}

.textwx {
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wxUserItem {
  height: 70px;
  border-bottom: 1px solid rgb(242, 242, 242);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.wxUserItem:hover {
  background: #eeeeee;
}

.contentBoxWx {
  height: calc(100% - 80px);
  width: 100%;
  overflow-y: auto;
}

.contentBoxWx::-webkit-scrollbar {
  width: 10px;
}

/* <!--修改 滚动条的 下面 的 样式--> */
.contentBoxWx::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/* <!--修改 滑块 --> */
.contentBoxWx::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.flooterBox {
  display: flex;
  padding-bottom: 20px;
  border-top: 1px solid #e4e4e4;
}

.btn2 {
  width: 50%;
  text-align: center;
  cursor: pointer;
}

.btn2>img {
  display: block;
  margin: 0 auto;
}
</style>